import React from "react"

import {UserOutlined} from "@ant-design/icons"
import {getTopData} from "../../../utils/api/home"
import {message, Empty} from "antd"

import "./index.scss"

/**
 * 顶部模块 组件
 */
export default class HomeTop extends React.Component {
    state = {
        list: []
    }
    pushClickHandler = (article) => {
        message.success(`切换到文章: ${article}`, 1.5)
        this.props.router.history.push(`/article/${article}`)
    }
    render() {
        return (
            <div className="s-hometop">
                {
                    this.state.list.length > 0 ? (
                        <>
                            <div className="s-hometop-left">
                                {
                                    this.state.list.length > 0 ? (
                                        <div className="s-hometop-left-box" onClick={() => this.pushClickHandler(this.state.list[0].article)}>
                                            <img src={this.state.list[0].imgUrl} alt="" />
                                            <div className="box-info">
                                                <div className="box-info-label">{this.state.list[0].label}</div>
                                                <h2 className="box-info-title">{this.state.list[0].title}</h2>
                                                <div className="box-info-author">
                                                    <UserOutlined />
                                                    <span className="info-author">{this.state.list[0].author}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ) : null
                                }
                            </div>
                            <div className="s-hometop-right">
                                {
                                    this.state.list.length > 1 ? (
                                        this.state.list.slice(1).map((item, index) => (
                                            <div className="s-hometop-right-box" key={item.id} onClick={() => this.pushClickHandler(item.article)}>
                                                <img src={item.imgUrl} alt="" />
                                                <div className="box-info">
                                                    <div className="box-info-label">{item.label}</div>
                                                    <h2 className="box-info-title">{item.title}</h2>
                                                    <div className="box-info-author">
                                                        <UserOutlined />
                                                        <span className="info-author">{item.author}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        ))
                                    ) : null
                                }
                                
                                
                            </div>
                        </>
                    ) : (
                        <div className="s-hometop-empty">
                            <h2>请求失败</h2>
                            <Empty />
                        </div>
                    )
                }
            </div>
        )
    }

    async componentDidMount() {

        // 获取数据

        // console.log("home-top",this.props)
        let resp = await getTopData()
        // console.log(resp)
        this.setState({list: resp})
    }
}